<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .todo-container{
        max-width: 600px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 20px auto;
        padding: 10px;
      }
      .todo-header{
        height: 40px;
        display: flex;
        align-items: center;
      }
      .todo-header input{ 
        flex: 1;
        height: 32px;
        border-radius: 6px;
      }

      .todo-content{
        margin-top: 20px;
      }
      .todo{
        height: 32px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
      }
      .todo .content{
        flex: 1;
      }
      .todo.undone{
        background-color: #c0e4a8;
      }
      .todo.done{
        text-decoration: line-through;
        background-color: #e07c7c;
      }
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
        <div class="todo-container" v-cloak>
          <div class="todo-header">
            <input type="text" v-model.trim="todoContent">
            <button @click="addTodo">增加</button>
          </div>
          <div class="todo-content">
            <div class="todo" v-if="todos.length === 0">
              暂无待办事项
            </div>
            <div :class="['todo', {
              done: todo.done,
              undone: !todo.done
            }]" v-for="(todo, index) in todos">
              <div class="content">{{todo.content}}</div>
              <div class="btns">
                <input type="checkbox" v-model="todo.done">
                <button @click="delTodo(index)">删除待办事项</button>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script src="./vue.global.js"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        data() {
          return {
            todoContent: '', // 绑定表单输入内容
            todos: [
              {
                content: '明天去爬山',
                done: false
              },
              {
                content: '后天去漂流',
                done: false
              },
              {
                content: '今天晚自习看电影',
                done: true
              }
            ]
          };
        },
        methods: {
          // 删除待办事项
          delTodo(index){
            if(confirm('此操作会彻底删除该事项,继续吗?')) {
              this.todos.splice(index, 1)
            }
          },
          // 新增待办事项
          addTodo() {
            console.log(this);
            if (this.todoContent === '') {
              return false;
            }
            this.todos.push({
              content: this.todoContent,
              done: false
            })
            this.todoContent = '';
          }
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
